
<template>
    <div class="page-form page-sign-add">   
      <Form  ref="formValidate" :model="formItem" :rules="ruleValidate" style="width: 500px" :label-width="120">
          <FormItem prop="name" label="姓名：">
              <Input v-model="formItem.name" placeholder="请输入您的姓名"></Input>
          </FormItem>
          <FormItem prop="num" label="工号：">
              <Input v-model="formItem.num" placeholder="请输入您的工号"></Input>
          </FormItem>
        
          <FormItem prop="bless" label="新年祝福：">
              <Input v-model="formItem.bless" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="写下您的新年祝福语"></Input>
          </FormItem>
          <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
              <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
          </FormItem>
      </Form>

    </div>
</template>

<script>
export default {
  data() {
    return {
      formItem: {
        name: "",
        num: "",
        bless: ""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "姓名不能为空哦~",
            trigger: "blur"
          }
        ],
        num: [
          {
            required: true,
            message: "您还没有输入工号哦~",
            trigger: "blur"
          }
        ],
        bless: [
          {
            required: true,
            message: "新年祝福怎么能少呢~",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleSubmit(name) {
      var self = this;

      this.$refs[name].validate(valid => {
        if (valid) {          
          var data = {
            name:self.formItem.name,
            num:self.formItem.num,
            bless:self.formItem.bless
          }
          // 定义请求
          var req = self.Axios.post(self.Interface.signSave,data);

          // 处理请求结果
          req.then(res=>{
            var data = res.data;
            if(data.success){
               this.$Message.success("签到成功");
               this.$router.push("/sign/list")
            }else{
               this.$Message.error(data.msg);
            }
          })
        } else {
          this.$Message.error("请完善您的签到信息");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>

<style scoped lang="less">
.page-form{
  overflow: auto;
  box-sizing: border-box;
  padding: 15px 0 0 0;
}
</style>